<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="工艺信息" name="first" lazy>
        <gongYi
          :data="gongyi.data"
          :total="gongyi.total"
          :BillNO="prop.BillNO"
          v-model:orderID="baogong.orderID"
        />
      </el-tab-pane>

      <el-tab-pane label="领料信息" name="second" lazy>
        <lingLiao v-bind="lingliao" />
      </el-tab-pane>

      <el-tab-pane label="报工详情" name="third" lazy>
        <baoGong :BillNO="prop.BillNO" v-bind="baogong" />
      </el-tab-pane>
      <!-- <el-tab-pane label="工单详情" name="fourth" lazy>
        <orderDetail :BillNO="prop.BillNO" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup>
import lingLiao from './modules/lingliao.vue'
import gongYi from './modules/gongyi.vue'
import baoGong from './modules/baogong.vue'
// import orderDetail from './modules/orderDetail.vue'
import { watchEffect, ref, watch } from 'vue'
import {
  getOrderLingliao,
  getOrderGongYi,
  
} from '@/api/decision/production.js'
import { getBaoGongTitle } from '@/api/pannel/production_pannel.js'

const activeName = ref('first')


const baogong = ref({
  route: {},
  orderID: ''
})

const lingliao = ref({
  data: [],
  total: 0
})

const gongyi = ref({
  data: [],
  total: 0
})

const prop = defineProps({
  BillNO: String
})

const baoGongTab = async code => {
  const { data } = await getBaoGongTitle({ code })
  baogong.value.route = data[0]

  if (baogong.value.route.lydb) {
    if (baogong.value.route.lydb == 0) {
      baogong.value.route.lydb = '销售订单'
    } else if (baogong.value.route.lydb == 1) {
      baogong.value.route.lydb = '其他'
    } else {
      baogong.value.route.lydb = '计划生产单'
    }
  }
}

watch(
  () => baogong.value.orderID,
  () => {
    activeName.value = 'third'
  }
)

watchEffect(async () => {
  activeName.value = 'first'
  const { data, total } = await getOrderLingliao({ BillNO: prop.BillNO })
  lingliao.value.data = data
  lingliao.value.total = total

  const { data: gongyiData, total: gongyiTotal } = await getOrderGongYi({
    BillNO: prop.BillNO
  })
  gongyi.value.data = gongyiData
  gongyi.value.total = gongyiTotal

  

  baoGongTab(prop.BillNO)
})
</script>

<style scoped lang="scss"></style>
